<template>
<div class="second">
    <Form ref="formInline" :label-width="80" :model="data.data">
        <FormItem prop="phone" label="已验证手机">
            <div class="phoneNum">
                <Input type="text"  readonly v-model="data.data.phoneNum">
            </Input></div>
        </FormItem>
        <FormItem label="手机验证码" prop="phoneVcode">
            <div class="telePhoveVcode">
                <Input type="text"  placeholder="请输入短信验证码"></Input>
                <Button type="primary" class="vcodeBtn" v-text="vcodeData.text" ></Button>
            </div>
        </FormItem>
        <FormItem>
            <Button style="width: 100%;" type="primary" size="large" @click="handleSubmit()">下一步</Button>
        </FormItem>
    </Form>
</div>
</template>

<script>
export default {
    props: ['data'],
    name: 'PasSecond',
    data() {
        return {
            vcodeData: {
                text: '获取验证码',
            },

        }
    },
    created() {
        let str = this.data.data.phoneNum;
        let str2 = str.substr(0, 3) + "****" + str.substr(7);
        this.data.data.phoneNum = str2;
    },
    methods: {
        handleSubmit() {
            this.$emit('on-submit', this.data)
        }
    },
}
</script>

<style lang="less" scoped>
.second {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;
    justify-content: center;
    padding-bottom: 140px;
}

.telePhoveVcode {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;

    .ivu-input-wrapper {
        width: 285px;
        padding-right: 20px;
    }

    .vcodeBtn {
        background-color: #D92410;
        border-color: #D92410;

    }
}

.ivu-btn {
    background-color: #D92410;
    border-color: #D92410;
}

.ivu-form-item {
    margin-bottom: 40px;
}
</style>
